﻿<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<!doctype html>
<html>

<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>商品列表</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.min.css" type="text/css"/>
    <script src="${pageContext.request.contextPath}/js/jquery-1.11.3.min.js" type="text/javascript"></script>
    <script src="${pageContext.request.contextPath}/js/bootstrap.min.js" type="text/javascript"></script>
    <!-- 引入自定义css文件 style.css -->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/style.css" type="text/css"/>

    <style>
        body {
            margin-top: 20px;
            margin: 0 auto;
            width: 100%;
        }

        .carousel-inner .item img {
            width: 100%;
            height: 300px;
        }
    </style>

    <script>
        
        function  changePageNum(pageNum) {
            location.href="${pageContext.request.contextPath}/productServlet?method=findProductByVo&cid=${productVo.cid}&lowPrice=${productVo.lowPrice}&highPrice=${productVo.highPrice}&pageNum="+pageNum
        }
    </script>
</head>

<body>
<%@ include file="header.jsp" %>
<%--分页对象中有数据，则分页展示--%>

<c:if test="${not empty pageInfo.list}">
    <div class="row" style="width:1210px;margin:0 auto;">
        <div class="col-md-12">
            <ol class="breadcrumb">
                <li><a href="#">首页</a></li>
            </ol>
        </div>
        <c:forEach  items="${pageInfo.list}" var="product">
            <div class="col-md-2">
                <a href="${pageContext.request.contextPath}/productServlet?method=findProductByPid&pid=${product.pid}">
                    <img src="${pageContext.request.contextPath}/${product.pimage}" width="170" height="170"
                         style="display: inline-block;">
                </a>
                <p><a href="${pageContext.request.contextPath}/productServlet?method=findProductByPid&pid=${product.pid}" style='color:green'>${product.pname}</a></p>
                <p><font color="#FF0000">商城价：&yen;${product.shopPrice}</font></p>
            </div>
        </c:forEach>
    </div>

    <!--分页 -->
    <div style="width:380px;margin:0 auto;margin-top:50px;">
        <ul class="pagination" style="text-align:center; margin-top:10px;">
            <c:if test="${pageInfo.pageNum == 1}">
                <li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
            </c:if>
            <c:if test="${pageInfo.pageNum > 1}">
                <li ><a href="#" aria-label="Previous" onclick="changePageNum(${pageInfo.prePage})"><span aria-hidden="true">&laquo;</span></a></li>
            </c:if>

            <c:forEach begin="1" end="${pageInfo.pages}" var="i">

                <c:if test="${pageInfo.pageNum== i}">
                    <li class="active"><a href="#" onclick="changePageNum(${i})">${i}</a></li>
                </c:if>

                <c:if test="${pageInfo.pageNum != i}">
                    <li ><a href="#" onclick="changePageNum(${i})">${i}</a></li>
                </c:if>

            </c:forEach>


            <c:if test="${pageInfo.pageNum == pageInfo.pages}">
                <li class="disabled"><a href="#" aria-label="Next"><span aria-hidden="true">&raquo;</span></a></li>
            </c:if>
            <c:if test="${pageInfo.pageNum < pageInfo.pages}">
                <li ><a href="#" aria-label="Next" onclick="changePageNum(${pageInfo.nextPage})"><span aria-hidden="true">&raquo;</span></a></li>
            </c:if>

        </ul>
    </div>
    <!-- 分页结束=======================        -->
</c:if>


<c:if test="${empty pageInfo.list}">

    <%--分页对象中没有数据，给出提示--%>
    <div style="position: absolute; right: 40%; top: 30%">
        <h1 style="color: #419641">
            Sorry 该条件下 没有数据
        </h1>
    </div>

</c:if>





<div style="text-align: center;margin-top: 5px; position: absolute;bottom: 0;left: 600px">
    <ul class="list-inline">
        <li><a>关于我们</a></li>
        <li><a>联系我们</a></li>
        <li><a>招贤纳士</a></li>
        <li><a>法律声明</a></li>
        <li><a>友情链接</a></li>
        <li><a target="_blank">支付方式</a></li>
        <li><a target="_blank">配送方式</a></li>
        <li><a>服务声明</a></li>
        <li><a>广告声明</a></li>
    </ul>
	<div style="text-align: center;margin-top: 5px;margin-bottom:20px;">
		Copyright &copy; 2005-2016 传智商城 版权所有
	</div>
</div>



</body>

</html>